import React, { Component } from 'react'
import './index.css'
import axios from 'axios';

export default class Hero extends Component {

    state = {
        hero: {
            poster: '', 
            name: '',
            spells: []
        }
    }

    render() {
        return (
            <div className="hero-container">
                <div>
                    <img src={this.state.hero.poster} alt="" />
                </div>
                <h2>{this.state.hero.name}</h2>
                <ul>
                    {
                        this.state.hero.spells.map(item => {
                            return <li key={item.spellId}>{item.name}</li>
                        })
                    }
                </ul>
            </div>
        )
    }

    async componentDidMount(){
        console.log(this.props);
        //1. 原始方式获取 id
        // let url = this.props.location.pathname;
        // let heroId = url.slice(6);

        //2. 添加路由占位符, 然后 this.props.match 获取 id
        let heroId = this.props.match.params.id;
        // let heroId = 10008;
        //发送请求获取该英雄的详细数据
        let {data} = await axios('https://game.gtimg.cn/images/lgamem/act/lrlib/js/hero/'+heroId+'.js')
        //保存数据
        this.setState({
            hero: {
                poster: data.hero.poster,
                name: data.hero.name,
                spells: data.spells
            }
        })
    }
}
